<!-- 标签面板组件 -->
<template>
	<!-- 主容器 -->
	<view class="tab-panel">
		<view class="tab-header">
			<view v-for="(tab, index) in tabs" :key="index" @click="activeTab = index"
				:class="['tab-item', { active: activeTab === index }]">
				{{ tab }}
			</view>
		</view>
		<view class="tab-content">
			<view v-show="activeTab === 0">
				<TwoFeatherPass :addData="addData"></TwoFeatherPass>

			</view>
			<view v-show="activeTab === 1">
				<ThreeFeatherPass :addData="addData"></ThreeFeatherPass>

			</view>
			<view v-show="activeTab === 2">
				<FourFeatherPass :addData="addData"></FourFeatherPass>

			</view>
			<view v-show="activeTab === 3">
				

			</view>
		</view>
	</view>
</template>

<script>
// 导入子组件
import TwoFeatherPass from './event_page/Two_Feather_Pass.vue';
import ThreeFeatherPass from './event_page/Three_Feather_Pass.vue';
import FourFeatherPass from './event_page/Four_Feather_Pass.vue';
// 导出组件配置
// 这是一个多标签面板组件，包含可切换的标签页和内容区域
export default {
	components: {
		TwoFeatherPass,
		ThreeFeatherPass,
		FourFeatherPass
	},
	name: "Tabpanel",
	props: {
		addData: {
			type: Array,
			default: () => []
		},
	},
	data() {
		return {
			tabs: ['两羽赛', '三羽赛', '四羽赛', '五羽赛'],
			activeTab: 0,
			pairs: [],
			batchData: []
		};
	},
	created() {

	},
	methods: {
		// 确认发布事件
		async confirmSelection() {
			// 准备批量数据
			for (let i = 0; i < this.pairs.length; i++) {
				const mergedArray = this.mergeObjectsToArray(
					this.pairs[i].owner_a,
					this.pairs[i].owner_b,
				);
				this.batchData.push(mergedArray);
			}
			console.log(this.batchData);
			try {
				// 为每个数据对象追加姓名字段
				const {
					confirm,
					cancel,
					content: designatedPerson
				} = await uni.showModal({
					title: '请输入指定人',
					editable: true,
					placeholder: '请输入指定人姓名',
					confirmText: '确认',
					cancelText: '取消'
				});

				if (!confirm || !designatedPerson) {
					if (!confirm) return;
					uni.showToast({
						title: '必须输入指定人',
						icon: 'none'
					});
					return;
				}
				this.batchData = this.batchData.map(item => ({
					...item,
					designated_person: designatedPerson
				}));
				// 调用crudOperations云对象批量添加数据
				const res = await uniCloud.importObject('crudOperations').batchAdd('user_saige_data', this
					.batchData);
				uni.showToast({
					title: '发布成功',
					icon: 'success'
				});
			} catch (e) {
				console.log(batchData);
				uni.showToast({
					title: '发布失败: ' + e.message,
					icon: 'none'
				});
			}
		},
		// 确认删除
		confirmDelete(index) {
			const card = this.addData[index];
			uni.showToast({
				title: `已删除${card.owner || '未知用户'}的鸽子`,
				icon: 'success',
				duration: 2000
			});
			this.addData.splice(index, 1);
		},
		// 确认删除组合
		combinationDelete(index) {
			const card = this.addData[index];
			uni.showToast({
				title: `已删除${card.owner || '未知用户'}的鸽子`,
				icon: 'success',
				duration: 2000
			});
			this.pairs.splice(index, 1);
		},
		// 生成配对组合事件
		generatePairs() {
			this.pairs = this.generatePigeonPairs(this.addData);
			console.log(this.pairs);

			//批量
		},

		// 生成配对组合函数
		generatePigeonPairs(history) {
			const pairs = [];
			for (let i = 0; i < history.length; i++) {
				for (let j = i + 1; j < history.length; j++) {
					const pair = {
						parent1: history[i],
						parent2: history[j],
					}
					console.log(this.mergeWithSuffix(pair.parent1, pair.parent2))
					pairs.push(this.mergeWithSuffix(pair.parent1, pair.parent2));
				}
			}

			return pairs;
		},
		// 合并函数：为字段添加唯一后缀
		mergeWithSuffix(data1, data2, suffix1 = '_a', suffix2 = '_b') {
			const merged = {};

			// 处理第一条数据
			for (const key in data1) {
				merged[key + suffix1] = data1[key];
			}
			// 处理第二条数据
			for (const key in data2) {
				merged[key + suffix2] = data2[key];
			}
			return merged;
		},

	}
}
</script>

<style>
.tab-panel {
	display: flex;
	flex-direction: column;
	align-items: center;
	box-shadow: 0 0 10px rgba(0, 102, 255, 0.5);
	border: 1px solid #0066ff;
	border-radius: 8px;
	padding: 10px;
}


.tab-header {
	display: flex;
	border-bottom: 1px solid #eee;
}

.tab-item {
	padding: 10px 15px;
	cursor: pointer;
	font-weight: bold;
	color: #333;
}

.tab-item.active {
	color: #007aff;
	border-bottom: 2px solid #007aff;
}

.tab-content {
	padding: 1px;
	border: 1px solid #eee;
	border-top: none;
	width: 100%;
}

.card-container {
	margin-top: 10px;
	overflow-y: auto;
	padding: 0;
	max-height: 200px;
}

.card {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 1px;
	background-color: #f8f9fa;
	border-radius: 10px;
	box-shadow: 0 0 10px rgba(0, 102, 255, 0.5);
	margin: 0 10px 5px 5px;
	border-left: none;
	border-right: none;
	border-top: 1px solid #0066ff;
	border-bottom: 1px solid #0066ff;
	height: auto;
	
}

.card-number {
	width: 30px;
	height: 30px;
	background-color: #0066ff;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-left: 6px;
	margin-right: 6px;
}

.number-text {
	color: white;
	font-weight: bold;
}

.card-content {
	flex: 1;
}

.content-title {
	display: block;
	font-size: 14px;
	color: #333;
}

.content-subtitle {
	display: block;
	font-size: 14px;
	color: #666;
}

.delete-icon {
	width: 25px;
	height: 25px;
	margin-right: 10px;
}

.btn-container {
	display: flex;
	justify-content: space-around;
	margin: 20rpx 0;
}

.generate-btn {
	flex: 1;
	margin: 0 20rpx;
	height: 80rpx;
	line-height: 80rpx;
	text-align: center;
	border-radius: 40rpx;
	background: linear-gradient(to right, #014ed2, #43bdff);
	color: white;
	font-size: 32rpx;
	transition: all 0.3s;
}

.confirm-btn {
	flex: 1;
	margin: 0 20rpx;
	height: 80rpx;
	line-height: 80rpx;
	text-align: center;
	border-radius: 40rpx;
	background: linear-gradient(to right, #4CAF50, #8BC34A);
	color: white;
	font-size: 32rpx;
	transition: all 0.3s;
}
</style>